<template>
  <div v-if="stageStore.layerData" class="pro-panel">
    <div>
      <el-button :text="false" @click="addEvent" class="btn-add-event">
        <SvgIcon icon-class="add" />新增交互事件
      </el-button>
      <el-collapse v-model="stageStore.layerEventId" accordion>
        <el-collapse-item
          v-for="(event, eventIndex) in stageStore.layerData.events"
          :key="event.id"
          :name="event.id"
        >
          <template #title>
            <div class="event-item-title-wrapper">
              <span class="event-name">{{ `事件 ${eventIndex + 1}` }}</span>
              <span class="operation">
                <!-- <SvgIcon icon-class="logo" /> -->
                <SvgIcon icon-class="删除" @click="handleRemoveEvent($event, event.id)" />
              </span>
            </div>
          </template>
          <template v-if="stageStore.layerEventData.id === event.id">
            <el-form label-width="120px">
              <el-select
                v-model="stageStore.layerEventData.name"
                class="m-2"
                placeholder="请选择"
                size="large"
              >
                <el-option
                  v-for="eventType in EventTypeOptions"
                  :key="eventType.label"
                  :label="eventType.label"
                  :value="eventType.value"
                />
              </el-select>
              <el-form-item label="动作设置" class="horizontal">
                <SvgIcon
                  icon-class="add"
                  style="justify-content: flex-end; margin-right: 4%"
                  @click="addAction"
                />
                <SvgIcon
                  icon-class="删除"
                  style="justify-content: flex-end"
                  @click="handleRemoveAction"
                />
              </el-form-item>
              <el-tabs v-model="stageStore.layerEventActionId" type="card">
                <el-tab-pane
                  v-for="(item, actionIndex) in stageStore.layerEventData.actions"
                  :key="item.id"
                  :name="item.id"
                >
                  <template #label>{{ `动作${actionIndex + 1}` }}</template>
                </el-tab-pane>
              </el-tabs>
              <template v-if="stageStore.layerEventActionData.id">
                <el-form-item label="动作">
                  <el-select
                    :model-value="stageStore.layerEventActionData.method"
                    placeholder="请选择"
                    size="large"
                    @change="(value) => handleActionChange(value)"
                  >
                    <el-option
                      v-for="action in stageActionList"
                      :key="action.value"
                      :label="action.label"
                      :value="action.value"
                    />
                  </el-select>
                </el-form-item>
                <component
                  :is="actionComponentMap[stageStore.layerEventActionData.method]"
                  :key="stageStore.layerEventActionId"
                />
              </template>
            </el-form>
          </template>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { getDefaultActionConfig } from '@/service/interaction/action/config';
import { stageActionList } from '@/service/interaction/action/stage';
import { EventTypeOptions, getDefaultEventConfig } from '@/service/interaction/strategy/config';
import { useStageStore } from '@/store/stage';
import { cloneDeep } from 'lodash';
import { actionComponentMap } from './action';

const stageStore = useStageStore();

onMounted(() => {
  if (stageStore.layerData.events.length) {
    stageStore.layerEventId = stageStore.layerData.events[0].id;
  }
});

const addEvent = () => {
  stageStore.layerData.events.push(getDefaultEventConfig());
};

const addAction = () => {
  const actions = stageStore.layerEventData.actions;
  const newAction = getDefaultActionConfig();
  actions.push(newAction);
  stageStore.layerEventActionId = newAction.id;
};

const handleActionChange = (value: string) => {
  if (!stageStore.layerEventActionData.id) {
    return;
  }
  stageStore.layerEventActionData.method = value;
  stageStore.layerEventActionData.target = '';
  stageStore.layerEventActionData.value = cloneDeep(
    stageActionList.find((o) => o.value === value)?.defaultValue
  );
};

const handleRemoveEvent = (event: MouseEvent, eventId: string) => {
  event.stopPropagation();
  const events = stageStore.layerData.events;
  const eventIndex = events.findIndex((o: any) => o.id === eventId);
  events.splice(eventIndex, 1);
};

const handleRemoveAction = () => {
  const actions = stageStore.layerEventData.actions;
  const actionIndex = actions.findIndex((o: any) => o.id === stageStore.layerEventActionId);
  actions.splice(actionIndex, 1);
  // 如果删除的是第一项, 则选中新的第一项
  stageStore.layerEventActionId =
    actionIndex > 0 ? actions[actionIndex - 1].id : actionIndex === 0 ? actions[0]?.id : '';
};
</script>
<style lang="less" scoped>
.pro-panel {
  :deep(.el-form-item) {
    flex-direction: column;

    .el-form-item__label {
      justify-content: flex-start;
    }
    .el-form-item__content {
      max-width: var(--item-content-width);
    }
    .el-select,
    .el-input-number,
    .el-cascader,
    .el-date-editor {
      width: 100%;
    }
    .el-tree-node__content {
      height: 32px;
    }
  }
  .svg-icon {
    font-size: 16px;
    color: #fff;
    background: #545454;
    &:hover {
      opacity: 0.8;
    }
  }
}
.element.style {
  padding: 0;
  z-index: 1000;
}
.el-slider {
  margin-top: 20px;
}
.el-slider:first-child {
  margin-top: 0;
}
.action1,
.action2 {
  width: 45%;
  float: left;
}
.action2 {
  margin-left: 5%;
}
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
:deep(.el-tag--info) {
  background: 0;
  color: white;
}
:deep(.el-tag--info) {
  color: antiquewhite;
}
:deep(.el-input-group__append, .el-input-group__prepend) {
  background-color: #303133;
  color: antiquewhite;
  width: 5%;
}
.layer-name {
  position: relative;
  top: 1px;
}
.btn-add-event {
  width: 100%;
  transition: all 0.2s;
  color: #fff;
  border: 2px solid #0560fd;
  background: #0560fd;
  &:hover {
    opacity: 0.8;
  }
  .svg-icon {
    background: transparent;
    margin-right: 7px;
    &:hover {
      opacity: 1;
    }
  }
}
.horizontal {
  flex-direction: row !important;
  :deep(.el-form-item__content) {
    justify-content: flex-end;
  }
}
.el-collapse {
  border-top-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  :deep(.el-collapse-item) {
    background: #3d3d3d;
    margin-top: 10px;
  }
  :deep(.el-collapse-item__header) {
    color: #fff;
    background-color: transparent;
    border-bottom-color: transparent;
    height: 48px;
    display: block;
    .el-collapse-item__arrow {
      display: none;
    }
    .event-item-title-wrapper {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      color: #fff;
      position: relative;
    }
    .event-name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-right: 10px;
    }
    .operation {
      flex-shrink: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      cursor: auto;
      .svg-icon {
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
  :deep(.el-collapse-item__wrap) {
    color: #fff;
    background-color: transparent;
    border-bottom-color: transparent;
    padding: 0 10px;
  }
  :deep(.el-collapse-item__content) {
    padding-bottom: 0;
  }
  :deep(.el-tabs) {
    .el-tabs__header {
      height: auto;
      border-bottom: none;
      background-color: rgba(36, 44, 52, 0.3);
    }
    .el-tabs__nav {
      border: none;
    }
    .el-tabs__item {
      width: 66px;
      height: 24px;
      line-height: 24px;
      color: #fff;
      padding: 0 !important;
      text-align: center;
      border: 1px solid transparent;
      &.is-active {
        border-color: rgba(5, 96, 253, 1);
        background: rgba(5, 96, 253, 0.3);
      }
    }
    .el-tabs__nav-next,
    .el-tabs__nav-prev {
      line-height: 24px;
    }
  }
}
</style>
